import React,{Component} from "react";
import MyHeader from "./MyHeader";
import {AppContext,DefaultContext} from "./context/index"

import MyButton from "./MyButton";
import UseCallbackView from "./UseCallbackView"
class App extends Component{
    constructor(props){
        super(props)
        this.state={
            value:"DefaultContext 初始化的值"
        }
    }
    setDefaultContext(){
        this.setState(state=>{
            return {
                value:"DefaultContext 被改变了"
            }
        })
    }
    render(){
        return (
            <>
                <MyHeader /> 
                <AppContext.Provider value="app">
                    <DefaultContext.Provider value={{value:this.state.value,change:()=>{
                        this.setDefaultContext.bind(this)()
                    }}}>
                        <MyButton />
                    </DefaultContext.Provider>
                </AppContext.Provider>
                <UseCallbackView></UseCallbackView>
            </>
        )
    }
}

/*
import MyAlert from "./MyAlert"
import {showAlert} from "./utils/utils"

import HocComponent from "./HocComponent"
const  Alert=HocComponent(MyAlert)
class App extends Component{
    constructor(props){
        super(props)
        this.state={
            headerFlg:true,
        }
        this.ref=React.createRef();
    }
    componentWillMount(){

    }
    changeHeaderFlg(){
        this.setState((state)=>{
            return{
                headerFlg:!state.headerFlg 
            }
        })
    }
    showAlert(){
        showAlert({title:"这里是标题",message:"这里是类容区域",ensureBtn:"我知道了",fn:()=>{
     
        }})
      
    }
    render(){
        return(
            <>
               {this.state.headerFlg&&<MyHeader change={()=>this.changeHeaderFlg()} title="React 学习"></MyHeader>}
                <div className="app" >
                    <h1>这里是我第一个测试React页面</h1>
                </div>
                <button className="pd_20 bg_409EFF" onClick={()=>{this.showAlert()}}>添加组件</button>
               
                <div  ref={this.ref}>
                    <Alert $el={this.ref} title="标题" message="这里是高阶组件传值的内容区域" ensureBtn="确定" />
                </div>
            </>
        )
    }
}
*/
export default App